<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Vue 学习笔记—组件 | KnightSama‘s Blog</title>
    <meta name="description" content="Hello, my friend!">
    <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js"></script>
    
    <link rel="preload" href="/assets/css/0.styles.c4ea52a5.css" as="style"><link rel="preload" href="/assets/js/app.a2483de7.js" as="script"><link rel="preload" href="/assets/js/4.0078dadf.js" as="script"><link rel="preload" href="/assets/js/1.c3e7d2b0.js" as="script"><link rel="preload" href="/assets/js/35.66d3fc4a.js" as="script"><link rel="prefetch" href="/assets/js/10.265e4f40.js"><link rel="prefetch" href="/assets/js/11.a3a2f8c1.js"><link rel="prefetch" href="/assets/js/12.1910f8cc.js"><link rel="prefetch" href="/assets/js/13.229fa478.js"><link rel="prefetch" href="/assets/js/14.c27d4a17.js"><link rel="prefetch" href="/assets/js/15.92adafd4.js"><link rel="prefetch" href="/assets/js/16.bcee7c14.js"><link rel="prefetch" href="/assets/js/17.ee1bcf41.js"><link rel="prefetch" href="/assets/js/18.fa3c3a4e.js"><link rel="prefetch" href="/assets/js/19.1a943c57.js"><link rel="prefetch" href="/assets/js/20.44781dae.js"><link rel="prefetch" href="/assets/js/21.1fe46223.js"><link rel="prefetch" href="/assets/js/22.6f7d46c2.js"><link rel="prefetch" href="/assets/js/23.56223d02.js"><link rel="prefetch" href="/assets/js/24.e7cad43b.js"><link rel="prefetch" href="/assets/js/25.b2902552.js"><link rel="prefetch" href="/assets/js/26.70698c07.js"><link rel="prefetch" href="/assets/js/27.6ee3d263.js"><link rel="prefetch" href="/assets/js/28.ce131de6.js"><link rel="prefetch" href="/assets/js/29.90552487.js"><link rel="prefetch" href="/assets/js/30.b3291ccc.js"><link rel="prefetch" href="/assets/js/31.ea8c441e.js"><link rel="prefetch" href="/assets/js/32.3e29bbeb.js"><link rel="prefetch" href="/assets/js/33.65e78c5e.js"><link rel="prefetch" href="/assets/js/34.3ba19d7c.js"><link rel="prefetch" href="/assets/js/36.f5725281.js"><link rel="prefetch" href="/assets/js/37.f5b0b5ff.js"><link rel="prefetch" href="/assets/js/38.3cae3054.js"><link rel="prefetch" href="/assets/js/39.47dc1ffe.js"><link rel="prefetch" href="/assets/js/5.f0714e2e.js"><link rel="prefetch" href="/assets/js/6.53240a5f.js"><link rel="prefetch" href="/assets/js/7.dc126a6b.js"><link rel="prefetch" href="/assets/js/8.86452400.js"><link rel="prefetch" href="/assets/js/9.16ef06de.js"><link rel="prefetch" href="/assets/js/vendors~flowchart.734d5d92.js">
    <link rel="stylesheet" href="/assets/css/0.styles.c4ea52a5.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div><div class="theme-container" data-v-0cb1c278><div data-v-0cb1c278><div id="loader-wrapper" class="loading-wrapper" data-v-4b73742e data-v-0cb1c278 data-v-0cb1c278><div class="loader-main" data-v-4b73742e><div data-v-4b73742e></div><div data-v-4b73742e></div><div data-v-4b73742e></div><div data-v-4b73742e></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-da0660ba data-v-0cb1c278 data-v-0cb1c278><h3 class="title" style="display:none;" data-v-da0660ba data-v-da0660ba>KnightSama‘s Blog</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-da0660ba data-v-da0660ba><input type="password" value="" data-v-da0660ba> <span data-v-da0660ba>Konck! Knock!</span> <button data-v-da0660ba>OK</button></label> <div class="footer" style="display:none;" data-v-da0660ba data-v-da0660ba><span data-v-da0660ba><i class="iconfont reco-theme" data-v-da0660ba></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-da0660ba>vuePress-theme-reco</a></span> <span data-v-da0660ba><i class="iconfont reco-copyright" data-v-da0660ba></i> <a data-v-da0660ba><span data-v-da0660ba>KnightSama</span>
            
          <!---->
          2021
        </a></span></div></div> <div class="hide" data-v-0cb1c278><header class="navbar" data-v-0cb1c278><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/Misaka.jpg" alt="KnightSama‘s Blog" class="logo"> <span class="site-name">KnightSama‘s Blog</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">Choose mode</h4> <ul class="color-mode-options"><li class="dark">dark</li><li class="auto active">auto</li><li class="light">light</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link"><i class="iconfont reco-home"></i>
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      分类
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/iOS/" class="nav-link"><i class="iconfont undefined"></i>
  iOS
</a></li><li class="dropdown-item"><!----> <a href="/categories/集锦/" class="nav-link"><i class="iconfont undefined"></i>
  集锦
</a></li><li class="dropdown-item"><!----> <a href="/categories/JavaScript/" class="nav-link"><i class="iconfont undefined"></i>
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/categories/Github/" class="nav-link"><i class="iconfont undefined"></i>
  Github
</a></li><li class="dropdown-item"><!----> <a href="/categories/Python/" class="nav-link"><i class="iconfont undefined"></i>
  Python
</a></li></ul></div></div><div class="nav-item"><a href="/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间线
</a></div><div class="nav-item"><a href="https://github.com/KnightSama" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  GitHub
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-0cb1c278></div> <aside class="sidebar" data-v-0cb1c278><div class="personal-info-wrapper" data-v-4a3def3c><img src="/Misaka.jpg" alt="author-avatar" class="personal-img" data-v-4a3def3c> <h3 class="name" data-v-4a3def3c>
    KnightSama
  </h3> <div class="num" data-v-4a3def3c><div data-v-4a3def3c><h3 data-v-4a3def3c>27</h3> <h6 data-v-4a3def3c>文章</h6></div> <div data-v-4a3def3c><h3 data-v-4a3def3c>14</h3> <h6 data-v-4a3def3c>标签</h6></div></div> <hr data-v-4a3def3c></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link"><i class="iconfont reco-home"></i>
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      分类
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/iOS/" class="nav-link"><i class="iconfont undefined"></i>
  iOS
</a></li><li class="dropdown-item"><!----> <a href="/categories/集锦/" class="nav-link"><i class="iconfont undefined"></i>
  集锦
</a></li><li class="dropdown-item"><!----> <a href="/categories/JavaScript/" class="nav-link"><i class="iconfont undefined"></i>
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/categories/Github/" class="nav-link"><i class="iconfont undefined"></i>
  Github
</a></li><li class="dropdown-item"><!----> <a href="/categories/Python/" class="nav-link"><i class="iconfont undefined"></i>
  Python
</a></li></ul></div></div><div class="nav-item"><a href="/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间线
</a></div><div class="nav-item"><a href="https://github.com/KnightSama" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  GitHub
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Vue 学习笔记—组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/Views/20200525.html#组件注册" class="sidebar-link">组件注册</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/Views/20200525.html#全局组件注册" class="sidebar-link">全局组件注册</a></li><li class="sidebar-sub-header"><a href="/Views/20200525.html#局部组件注册" class="sidebar-link">局部组件注册</a></li></ul></li><li><a href="/Views/20200525.html#给组件添加数据" class="sidebar-link">给组件添加数据</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/Views/20200525.html#给组件添加方法" class="sidebar-link">给组件添加方法</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/Views/20200525.html#动态组件" class="sidebar-link">动态组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/Views/20200525.html#通过-v-if-切换" class="sidebar-link">通过 v-if 切换</a></li><li class="sidebar-sub-header"><a href="/Views/20200525.html#通过-is-属性切换" class="sidebar-link">通过 is 属性切换</a></li></ul></li><li><a href="/Views/20200525.html#异步组件" class="sidebar-link">异步组件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/Views/20200525.html#单文件组件" class="sidebar-link">单文件组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/Views/20200525.html#src-导入" class="sidebar-link">Src 导入</a></li><li class="sidebar-sub-header"><a href="/Views/20200525.html#使用单文件组件" class="sidebar-link">使用单文件组件</a></li></ul></li><li><a href="/Views/20200525.html#自定义属性" class="sidebar-link">自定义属性</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/Views/20200525.html#prop" class="sidebar-link">prop</a></li><li class="sidebar-sub-header"><a href="/Views/20200525.html#传递对象的所有属性" class="sidebar-link">传递对象的所有属性</a></li></ul></li><li><a href="/Views/20200525.html#自定义事件" class="sidebar-link">自定义事件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/Views/20200525.html#监听组件事件" class="sidebar-link">监听组件事件</a></li><li class="sidebar-sub-header"><a href="/Views/20200525.html#让组件支持-v-model" class="sidebar-link">让组件支持 v-model</a></li></ul></li><li><a href="/Views/20200525.html#组件传值" class="sidebar-link">组件传值</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/Views/20200525.html#父组件向子组件传值" class="sidebar-link">父组件向子组件传值</a></li><li class="sidebar-sub-header"><a href="/Views/20200525.html#子组件向父组件传值" class="sidebar-link">子组件向父组件传值</a></li><li class="sidebar-sub-header"><a href="/Views/20200525.html#访问根实例与父组件实例" class="sidebar-link">访问根实例与父组件实例</a></li><li class="sidebar-sub-header"><a href="/Views/20200525.html#依赖注入" class="sidebar-link">依赖注入</a></li><li class="sidebar-sub-header"><a href="/Views/20200525.html#访问子组件实例" class="sidebar-link">访问子组件实例</a></li></ul></li><li><a href="/Views/20200525.html#插槽" class="sidebar-link">插槽</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/Views/20200525.html#默认内容" class="sidebar-link">默认内容</a></li><li class="sidebar-sub-header"><a href="/Views/20200525.html#具名插槽" class="sidebar-link">具名插槽</a></li><li class="sidebar-sub-header"><a href="/Views/20200525.html#作用域插槽" class="sidebar-link">作用域插槽</a></li></ul></li></ul></section></li></ul> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-da0660ba data-v-0cb1c278><h3 class="title" style="display:none;" data-v-da0660ba data-v-da0660ba>Vue 学习笔记—组件</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-da0660ba data-v-da0660ba><input type="password" value="" data-v-da0660ba> <span data-v-da0660ba>Konck! Knock!</span> <button data-v-da0660ba>OK</button></label> <div class="footer" style="display:none;" data-v-da0660ba data-v-da0660ba><span data-v-da0660ba><i class="iconfont reco-theme" data-v-da0660ba></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-da0660ba>vuePress-theme-reco</a></span> <span data-v-da0660ba><i class="iconfont reco-copyright" data-v-da0660ba></i> <a data-v-da0660ba><span data-v-da0660ba>KnightSama</span>
            
          <!---->
          2021
        </a></span></div></div> <div data-v-0cb1c278><main class="page"><div class="sidebar-open-close"><svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <!----> <div class="page-title" style="display:none;"><h1>Vue 学习笔记—组件</h1> <hr> <div data-v-73367bb4><i class="iconfont reco-account" data-v-73367bb4><span data-v-73367bb4>KnightSama</span></i> <i class="iconfont reco-date" data-v-73367bb4><span data-v-73367bb4>2020-05-25</span></i> <i class="iconfont reco-eye" data-v-73367bb4><span id="/Views/20200525.html" data-flag-title="Your Article Title" class="leancloud-visitors" data-v-73367bb4><a class="leancloud-visitors-count" style="font-size:.9rem;font-weight:normal;color:#999;"></a></span></i> <i class="iconfont reco-tag tags" data-v-73367bb4><span class="tag-item" data-v-73367bb4>
      Vue
    </span></i></div></div> <div class="theme-reco-content content__default" style="display:none;"><p>组件 (component) 是可复用的 Vue 实例，可以扩展 HTML 元素，封装可重用的代码。我们可以通过不同的组件来划分不同的功能模块，当我们需要相应功能就去调用对应的组件即可。

因为组件是可复用的 Vue 实例，所以它与普通的 Vue 实例接收相同的选项，例如  <code>data</code> 、 <code>computed</code> 、 <code>watch</code> 、 <code>methods</code>  以及生命周期钩子等。仅有的例外是像  <code>el</code>  这样根实例特有的选项。</p> <h2 id="组件注册"><a href="#组件注册" class="header-anchor">#</a> 组件注册</h2> <h3 id="全局组件注册"><a href="#全局组件注册" class="header-anchor">#</a> 全局组件注册</h3> <p>我们可以通过  <code>Vue.component</code>  来注册全局组件，其有两个参数，第一个参数是要创建的组件名称，第二个参数是组件的定义。在组件的定义中通过  <code>template</code>  关键字来指明组件的 html 元素，当我们需要使用组件时通过组件名称来调用。组件只能使用在 Vue 实例控制的区域</p> <h4 id="注册组件方式一"><a href="#注册组件方式一" class="header-anchor">#</a> 注册组件方式一</h4> <p>将组件内容直接放在组件定义中，当内容比较简单时可以采用该方式</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Cdiv%20id%3D%22vue-example-1%22%3E%0A%20%20%20%20%3C!--%20%E4%BD%BF%E7%94%A8%E7%BB%84%E4%BB%B6%20--%3E%0A%20%20%20%20%3Cmy-component-1%3E%3C%2Fmy-component-1%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%0A%20%20%20%20%2F%2F%20%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%0A%20%20%20%20Vue.component('my-component-1'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20'%3Cdiv%3E%3Cp%3Ehello%20Vue%3C%2Fp%3E%3C%2Fdiv%3E'%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-1'%2C%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 使用组件 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-1</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-1</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token comment">// 定义组件</span>
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-1'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        template<span class="token punctuation">:</span> <span class="token string">'&lt;div&gt;&lt;p&gt;hello Vue&lt;/p&gt;&lt;/div&gt;'</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-1'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <h4 id="注册组件方式二"><a href="#注册组件方式二" class="header-anchor">#</a> 注册组件方式二</h4> <p>将组件内容放到  <code>template</code>  标签中去，通过  <code>id</code>  来指示模板，这也是推荐的用法</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3C!--%20%E5%AE%9A%E4%B9%89%E6%A8%A1%E6%9D%BF%20--%3E%0A%3Ctemplate%20id%3D%22my-template-1%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Cp%3Ehello%20Vue%3C%2Fp%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%0A%3Cdiv%20id%3D%22vue-example-2%22%3E%0A%20%20%20%20%3C!--%20%E4%BD%BF%E7%94%A8%E7%BB%84%E4%BB%B6%20--%3E%0A%20%20%20%20%3Cmy-component-2%3E%3C%2Fmy-component-2%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%0A%20%20%20%20%2F%2F%20%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%0A%20%20%20%20Vue.component('my-component-2'%2C%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20%E4%BD%BF%E7%94%A8%E6%A8%A1%E6%9D%BF%20id%0A%20%20%20%20%20%20%20%20template%3A%20'%23my-template-1'%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-2'%2C%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 定义模板 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>my-template-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>hello Vue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 使用组件 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-2</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-2</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token comment">// 定义组件</span>
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-2'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        <span class="token comment">// 使用模板 id</span>
        template<span class="token punctuation">:</span> <span class="token string">'#my-template-1'</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-2'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <h3 id="局部组件注册"><a href="#局部组件注册" class="header-anchor">#</a> 局部组件注册</h3> <p>我们可以在某个 Vue 实例中注册局部组件，这样注册的组件只在该实例中有效</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3C!--%20%E5%AE%9A%E4%B9%89%E6%A8%A1%E6%9D%BF%20--%3E%0A%3Ctemplate%20id%3D%22my-template-2%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Cp%3Ehello%20Vue%3C%2Fp%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%0A%3Cdiv%20id%3D%22vue-example-3%22%3E%0A%20%20%20%20%3C!--%20%E4%BD%BF%E7%94%A8%E7%BB%84%E4%BB%B6%20--%3E%0A%20%20%20%20%3Cmy-component-3%3E%3C%2Fmy-component-3%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%20%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-3'%2C%0A%20%20%20%20%20%20%20%20components%3A%20%7B%20%20%2F%2F%20%E6%B3%A8%E5%86%8C%E5%B1%80%E9%83%A8%E7%BB%84%E4%BB%B6%0A%20%20%20%20%20%20%20%20%20%20%20%20'my-component-3'%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20template%3A%20'%23my-template-2'%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 定义模板 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>my-template-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>hello Vue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 使用组件 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-3</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-3</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> 
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-3'</span><span class="token punctuation">,</span>
        components<span class="token punctuation">:</span> <span class="token punctuation">{</span>  <span class="token comment">// 注册局部组件</span>
            <span class="token string">'my-component-3'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
                template<span class="token punctuation">:</span> <span class="token string">'#my-template-2'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <h2 id="给组件添加数据"><a href="#给组件添加数据" class="header-anchor">#</a> 给组件添加数据</h2> <p>当组件需要动态展示信息时就需要给组件添加  <code>data</code> , 给组件添加的  <code>data</code>  其作用域只限于该组件中</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3C!--%20%E5%AE%9A%E4%B9%89%E6%A8%A1%E6%9D%BF%20--%3E%0A%3Ctemplate%20id%3D%22my-template-3%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Cp%3E%7B%7Bmessage%7D%7D%3C%2Fp%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%0A%3Cdiv%20id%3D%22vue-example-4%22%3E%0A%20%20%20%20%3C!--%20%E4%BD%BF%E7%94%A8%E7%BB%84%E4%BB%B6%20--%3E%0A%20%20%20%20%3Cmy-component-4%3E%3C%2Fmy-component-4%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%20%0A%20%20%20%20%2F%2F%20%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%0A%20%20%20%20Vue.component('my-component-4'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20'%23my-template-3'%2C%0A%20%20%20%20%20%20%20%20%2F%2F%20%E6%B7%BB%E5%8A%A0%20data%0A%20%20%20%20%20%20%20%20data%3A%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20message%3A%20'hello%20Vue'%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-4'%2C%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 定义模板 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>my-template-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>{{message}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 使用组件 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-4</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-4</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> 
    <span class="token comment">// 定义组件</span>
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-4'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        template<span class="token punctuation">:</span> <span class="token string">'#my-template-3'</span><span class="token punctuation">,</span>
        <span class="token comment">// 添加 data</span>
        <span class="token function-variable function">data</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                message<span class="token punctuation">:</span> <span class="token string">'hello Vue'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-4'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <p>上面的例子中可以看到，与普通的 Vue 实例不同，组件中的  <code>data</code>  不再是一个对象而是一个函数，这个函数将数据对象返回，也就是说组件的数据对象必须包裹在函数中。除此之外组件中的  <code>data</code>  使用与普通的 Vue 实例完全相同</p> <div class="custom-block tip"><p class="custom-block-title">为什么组件的 data 是函数</p> <p>组件通过函数返回对象，是为了让每个组件都有自己独立的数据存储，保证每个组件数据的独立性。由于组件可以被多次使用，如果简单的通过对象定义，则每次创建该组件时都会使用同一套数据，组件与组件间就不再独立。而通过函数返回值的方式来定义可以保证每次组件创建时都会调用该函数重新创建数据对象，保证每个组件数据存储的独立性。</p></div> <h2 id="给组件添加方法"><a href="#给组件添加方法" class="header-anchor">#</a> 给组件添加方法</h2> <p>跟  <code>data</code>  一样我们通过  <code>method</code>  给组件添加方法，方法的作用域局限于该组件中</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3C!--%20%E5%AE%9A%E4%B9%89%E6%A8%A1%E6%9D%BF%20--%3E%0A%3Ctemplate%20id%3D%22my-template-4%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Cp%3E%7B%7Bcount%7D%7D%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22button%22%20value%3D%22%E7%82%B9%E5%87%BB%E5%A2%9E%E5%8A%A0%E6%95%B0%E5%AD%97%22%20%40click%3D%22add%22%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%0A%3Cdiv%20id%3D%22vue-example-5%22%3E%0A%20%20%20%20%3C!--%20%E4%BD%BF%E7%94%A8%E7%BB%84%E4%BB%B6%20--%3E%0A%20%20%20%20%3Cmy-component-5%3E%3C%2Fmy-component-5%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%20%0A%20%20%20%20%2F%2F%20%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%0A%20%20%20%20Vue.component('my-component-5'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20'%23my-template-4'%2C%0A%20%20%20%20%20%20%20%20data%3A%20function()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20count%3A%200%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%2F%2F%20%E6%B7%BB%E5%8A%A0%E6%96%B9%E6%B3%95%0A%20%20%20%20%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20add%3A%20function()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.count%2B%2B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-5'%2C%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 定义模板 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>my-template-4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>{{count}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>点击增加数字<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>add<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 使用组件 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-5</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-5</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> 
    <span class="token comment">// 定义组件</span>
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-5'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        template<span class="token punctuation">:</span> <span class="token string">'#my-template-4'</span><span class="token punctuation">,</span>
        <span class="token function-variable function">data</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                count<span class="token punctuation">:</span> <span class="token number">0</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// 添加方法</span>
        methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token function-variable function">add</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span>count<span class="token operator">++</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-5'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <h2 id="动态组件"><a href="#动态组件" class="header-anchor">#</a> 动态组件</h2> <h3 id="通过-v-if-切换"><a href="#通过-v-if-切换" class="header-anchor">#</a> 通过  <code>v-if</code>  切换</h3> <p>我们可以通过  <code>v-if</code>  与  <code>v-else</code>  组合的方式控制多个组件之间显示的切换</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Cdiv%20id%3D%22vue-example-6%22%3E%0A%20%20%20%20%3Cmy-component-6%20v-if%3Dflag%3E%3C%2Fmy-component-6%3E%0A%20%20%20%20%3Cmy-component-7%20v-else%3Dflag%3E%3C%2Fmy-component-7%3E%0A%20%20%20%20%3Cinput%20type%3D%22button%22%20value%3D%22%E7%82%B9%E5%87%BB%E5%88%87%E6%8D%A2%E7%BB%84%E4%BB%B6%22%20%40click%3D%22flag%20%3D%20!flag%22%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%20%0A%20%20%20%20Vue.component('my-component-6'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20'%3Cdiv%20style%3D%22width%3A%20100px%3Bheight%3A%20100px%3Bbackground-color%3A%20red%22%3E%3C%2Fdiv%3E'%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20Vue.component('my-component-7'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20'%3Cdiv%20style%3D%22width%3A%20100px%3Bheight%3A%20100px%3Bbackground-color%3A%20green%22%3E%3C%2Fdiv%3E'%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-6'%2C%0A%20%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20flag%3A%20true%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-6</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span>flag</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-6</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-7</span> <span class="token attr-name">v-else</span><span class="token attr-value"><span class="token punctuation">=</span>flag</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-7</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>点击切换组件<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>flag = !flag<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> 
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-6'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        template<span class="token punctuation">:</span> <span class="token string">'&lt;div style=&quot;width: 100px;height: 100px;background-color: red&quot;&gt;&lt;/div&gt;'</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-7'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        template<span class="token punctuation">:</span> <span class="token string">'&lt;div style=&quot;width: 100px;height: 100px;background-color: green&quot;&gt;&lt;/div&gt;'</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-6'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
             flag<span class="token punctuation">:</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <h3 id="通过-is-属性切换"><a href="#通过-is-属性切换" class="header-anchor">#</a> 通过  <code>is</code>  属性切换</h3> <p>当我们需要对多个组件进行切换时 Vue 提供了  <code>&lt;component&gt;</code>  标签实现，通过  <code>:is</code>  属性来指明需要显示的组件名称或名称变量</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Cdiv%20id%3D%22vue-example-7%22%3E%0A%20%20%20%20%3C!--%20%E6%AD%A4%E5%A4%84%E6%98%BE%E7%A4%BA%20name%20%E5%8F%98%E9%87%8F%E6%8C%87%E5%AE%9A%E7%9A%84%E7%BB%84%E4%BB%B6%20--%3E%0A%20%20%20%20%3Ccomponent%20%3Ais%3D%22name%22%3E%3C%2Fcomponent%3E%0A%20%20%20%20%3Cinput%20type%3D%22button%22%20value%3D%22%E7%82%B9%E5%87%BB%E5%88%87%E6%8D%A2%E7%BB%84%E4%BB%B6%22%20%40click%3D%22change%22%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%20%0A%20%20%20%20Vue.component('my-component-8'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20'%3Cdiv%20style%3D%22width%3A%20100px%3Bheight%3A%20100px%3Bbackground-color%3A%20red%22%3E%3C%2Fdiv%3E'%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20Vue.component('my-component-9'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20'%3Cdiv%20style%3D%22width%3A%20100px%3Bheight%3A%20100px%3Bbackground-color%3A%20green%22%3E%3C%2Fdiv%3E'%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-7'%2C%0A%20%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20name%3A%20%22my-component-8%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20change%3A%20function()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.name%20%3D%20(this.name%20%3D%3D%3D%20%22my-component-8%22)%20%3F%20%22my-component-9%22%20%3A%20%22my-component-8%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-7<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 此处显示 name 变量指定的组件 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span> <span class="token attr-name">:is</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>点击切换组件<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>change<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> 
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-8'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        template<span class="token punctuation">:</span> <span class="token string">'&lt;div style=&quot;width: 100px;height: 100px;background-color: red&quot;&gt;&lt;/div&gt;'</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-9'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        template<span class="token punctuation">:</span> <span class="token string">'&lt;div style=&quot;width: 100px;height: 100px;background-color: green&quot;&gt;&lt;/div&gt;'</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-7'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
             name<span class="token punctuation">:</span> <span class="token string">&quot;my-component-8&quot;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
             <span class="token function-variable function">change</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                 <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">===</span> <span class="token string">&quot;my-component-8&quot;</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token string">&quot;my-component-9&quot;</span> <span class="token punctuation">:</span> <span class="token string">&quot;my-component-8&quot;</span>
             <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <h4 id="保持组件状态"><a href="#保持组件状态" class="header-anchor">#</a> 保持组件状态</h4> <p>组件切换时 Vue 会重新创建一个组件的实例，但有时后我们希望能够将组件缓存下来，避免反复重渲染导致的性能问题。这个时候可以使用  <code>&lt;keep-alive&gt;</code>  标签将需要缓存的组件包裹起来。这样我们就可以保存组件切换时的状态，例如在切换选择列表时记住用户上次的选择</p> <p>下面的例子中被  <code>&lt;keep-alive&gt;</code>  包裹的组件输入框在切换时输入的内容会保存下来，而没有包裹的组件内容会丢失</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Cdiv%20id%3D%22vue-example-17%22%3E%0A%20%20%20%20%3Ch5%3E%E6%B2%A1%E6%9C%89%20keep-alive%20%E6%A0%87%E7%AD%BE%E7%9A%84%E7%BB%84%E4%BB%B6%E5%88%87%E6%8D%A2%E4%BC%9A%E4%B8%A2%E5%A4%B1%E4%B9%8B%E5%89%8D%E8%BE%93%E5%85%A5%E7%9A%84%E5%86%85%E5%AE%B9%3C%2Fh5%3E%0A%20%20%20%20%3Ccomponent%20%3Ais%3D%22name%22%3E%3C%2Fcomponent%3E%0A%20%20%20%20%3Ch5%3E%E6%9C%89%20keep-alive%20%E6%A0%87%E7%AD%BE%E7%9A%84%E7%BB%84%E4%BB%B6%E5%88%87%E6%8D%A2%E4%BC%9A%E4%BF%9D%E7%95%99%E4%B9%8B%E5%89%8D%E7%9A%84%E5%86%85%E5%AE%B9%3C%2Fh5%3E%0A%20%20%20%20%3Ckeep-alive%3E%0A%20%20%20%20%20%20%20%20%3Ccomponent%20%3Ais%3D%22name%22%3E%3C%2Fcomponent%3E%0A%20%20%20%20%3C%2Fkeep-alive%3E%0A%20%20%20%20%3Cbr%2F%3E%0A%20%20%20%20%3Cinput%20type%3D%22button%22%20value%3D%22%E7%82%B9%E5%87%BB%E5%88%87%E6%8D%A2%E7%BB%84%E4%BB%B6%22%20%40click%3D%22change%22%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%20%0A%20%20%20%20Vue.component('my-component-18'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20'%3Cdiv%3E%E5%A7%93%E5%90%8D%3A%3Cinput%20type%3D%22text%22%3E%3C%2Fdiv%3E'%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20Vue.component('my-component-19'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20'%3Cdiv%3E%E5%B9%B4%E9%BE%84%3A%3Cinput%20type%3D%22text%22%3E%3C%2Fdiv%3E'%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-17'%2C%0A%20%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20name%3A%20%22my-component-18%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20change%3A%20function()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.name%20%3D%20(this.name%20%3D%3D%3D%20%22my-component-18%22)%20%3F%20%22my-component-19%22%20%3A%20%22my-component-18%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-17<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">&gt;</span></span>没有 keep-alive 标签的组件切换会丢失之前输入的内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span> <span class="token attr-name">:is</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">&gt;</span></span>有 keep-alive 标签的组件切换会保留之前的内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>keep-alive</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span> <span class="token attr-name">:is</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>keep-alive</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>点击切换组件<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>change<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> 
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-18'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        template<span class="token punctuation">:</span> <span class="token string">'&lt;div&gt;姓名:&lt;input type=&quot;text&quot;&gt;&lt;/div&gt;'</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-19'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        template<span class="token punctuation">:</span> <span class="token string">'&lt;div&gt;年龄:&lt;input type=&quot;text&quot;&gt;&lt;/div&gt;'</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-17'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
             name<span class="token punctuation">:</span> <span class="token string">&quot;my-component-18&quot;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
             <span class="token function-variable function">change</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                 <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">===</span> <span class="token string">&quot;my-component-18&quot;</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token string">&quot;my-component-19&quot;</span> <span class="token punctuation">:</span> <span class="token string">&quot;my-component-18&quot;</span>
             <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <h2 id="异步组件"><a href="#异步组件" class="header-anchor">#</a> 异步组件</h2> <p>有时候我们可能需要从服务器获取一个组件，Vue 允许以一个工厂函数的方式定义组件，这个工厂函数会异步解析组件定义，Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。</p> <p>下面的例子中用  <code>setTimeout</code>  模拟一个异步请求，实际情况中这里大多是一个网络请求，返回的组件定义类通过  <code>resolve</code>  异步返回，通过回调  <code>reject(reason)</code>  来表示加载失败</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Cdiv%20id%3D%22vue-example-18%22%3E%0A%20%20%20%20%3Cmy-component-20%3E%3C%2Fmy-component-20%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%20%0A%20%20%20%20Vue.component('my-component-20'%2C%20function%20(resolve%2C%20reject)%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20%E6%A8%A1%E6%8B%9F%E5%BC%82%E6%AD%A5%E8%AF%B7%E6%B1%82%E8%BF%94%E5%9B%9E%0A%20%20%20%20%20%20%20%20setTimeout(function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20resolve(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20template%3A%20'%3Cdiv%3E%E8%BF%99%E6%98%AF%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6%3C%2Fdiv%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%20%20%20%20%7D%2C%201000)%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-18'%2C%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-18<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-20</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-20</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> 
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-20'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// 模拟异步请求返回</span>
        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                template<span class="token punctuation">:</span> <span class="token string">'&lt;div&gt;这是异步组件&lt;/div&gt;'</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-18'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <p>我们还可以在工厂方法中返回一个  <code>Promise</code>  对象</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 这里 import 返回一个 Promise 对象</span>
Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-20'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'./async-component'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="单文件组件"><a href="#单文件组件" class="header-anchor">#</a> 单文件组件</h2> <p>除了上面定义组件的方法外我们还可以将组件按格式定义到一个单独的  <code>.vue</code>  文件中，这就是单文件的组件。 <code>.vue</code>  文件是一个自定义的文件类型，用类  <code>HTML</code>  语法描述一个  <code>Vue</code>  组件。每个  <code>.vue</code>  文件包含三种类型的顶级语言块  <code>&lt;template&gt;</code> 、 <code>&lt;script&gt;</code>  和  <code>&lt;style&gt;</code> ，还允许添加可选的自定义块</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ msg }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token punctuation">:</span> <span class="token string">&quot;组件名称&quot;</span><span class="token punctuation">,</span>
  <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      msg<span class="token punctuation">:</span> <span class="token string">'Hello Vue'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.example</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p>这个文件无法被浏览器直接使用，需要通过  <code>vue-loader</code>  解析。 <code>vue-loader</code>  支持使用非默认语言，例如，你可以像下面这样使用  <code>Sass</code>  语法编写样式</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>sass<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
  ...
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="src-导入"><a href="#src-导入" class="header-anchor">#</a> <code>Src</code>  导入</h3> <p>除了上面将所有内容写到一个文件中外，还可以用下面的方式从多个文件中导入</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>./template.html<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>./style.css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>./script.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="使用单文件组件"><a href="#使用单文件组件" class="header-anchor">#</a> 使用单文件组件</h3> <p>首先需要通过  <code>import</code>  导入你要引入的组件，然后像使用普通组件那样注册使用就可以了。例如我们要在某个组件中引入  <code>myComponent.vue</code>  中的  <code>myComponent</code>  组件</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">import</span> myComponent <span class="token keyword">from</span> <span class="token string">'./myComponent.vue'</span>
    
    <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
        name<span class="token punctuation">:</span> <span class="token string">'app'</span><span class="token punctuation">,</span>
        components<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            myComponent
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="自定义属性"><a href="#自定义属性" class="header-anchor">#</a> 自定义属性</h2> <h3 id="prop"><a href="#prop" class="header-anchor">#</a> <code>prop</code></h3> <p>Vue 允许我们在自己的组件中注册自定义的属性，这些自定义的属性称为  <code>prop</code> 。在使用组件时给这些属性赋值可以改变组件内部的状态或数据。当一个值传递给一个  <code>prop</code>  属性的时候，它就变成了那个组件实例的一个属性。一个组件默认可以拥有任意数量的  <code>prop</code> ，任何值都可以传递给  <code>prop</code> 。</p> <p>我们可以通过在组件对象中添加  <code>props</code>  属性来定义  <code>prop</code> ，同时我们可以在组件的模板中使用这些  <code>prop</code>  属性就如同使用  <code>data</code>  中的属性一样。并且在使用模板时可以为自定义的属性赋值，还可以使用  <code>v-bind</code>  绑定动态数据。</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Cdiv%20id%3D%22prop-example%22%3E%0A%20%20%20%20%3C!--%20%E7%9B%B4%E6%8E%A5%E7%BB%99%E8%87%AA%E5%AE%9A%E4%B9%89%E7%9A%84%20title%20%E5%B1%9E%E6%80%A7%E8%B5%8B%E5%80%BC%20--%3E%0A%20%20%20%20%3C!--%20%E7%BB%91%E5%AE%9A%E8%87%AA%E5%AE%9A%E4%B9%89%E7%9A%84%20message%20%E5%B1%9E%E6%80%A7%E5%88%B0%20info%20%E5%8F%98%E9%87%8F%E4%B8%8A%20--%3E%0A%20%20%20%20%3Cprop-component%20title%3D%22%E6%B5%8B%E8%AF%95%20prop%22%20v-bind%3Amessage%3D%22info%22%3E%3C%2Fprop-component%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%20%0A%20%20%20%20Vue.component('prop-component'%2C%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20%E5%9C%A8%E6%A8%A1%E6%9D%BF%E4%B8%AD%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7%0A%20%20%20%20%20%20%20%20template%3A%20'%3Cdiv%3E%3Ch3%3E%7B%7Btitle%7D%7D%3C%2Fh3%3E%3Cp%3E%7B%7Bmessage%7D%7D%3C%2Fp%3E%3C%2Fdiv%3E'%2C%0A%20%20%20%20%20%20%20%20%2F%2F%20%E4%B8%BA%E7%BB%84%E4%BB%B6%E6%B7%BB%E5%8A%A0%E4%B8%A4%E4%B8%AA%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7%0A%20%20%20%20%20%20%20%20props%3A%20%5B'title'%2C%20'message'%5D%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23prop-example'%2C%0A%20%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20info%3A%22%E8%BF%99%E6%98%AF%E7%BB%91%E5%AE%9A%E7%9A%84%20Vue%20%E5%AE%9E%E4%BE%8B%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>prop-example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 直接给自定义的 title 属性赋值 --&gt;</span>
    <span class="token comment">&lt;!-- 绑定自定义的 message 属性到 info 变量上 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>prop-component</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>测试 prop<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">v-bind:</span>message</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>prop-component</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> 
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'prop-component'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        <span class="token comment">// 在模板中使用自定义属性</span>
        template<span class="token punctuation">:</span> <span class="token string">'&lt;div&gt;&lt;h3&gt;{{title}}&lt;/h3&gt;&lt;p&gt;{{message}}&lt;/p&gt;&lt;/div&gt;'</span><span class="token punctuation">,</span>
        <span class="token comment">// 为组件添加两个自定义属性</span>
        props<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'title'</span><span class="token punctuation">,</span> <span class="token string">'message'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#prop-example'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            info<span class="token punctuation">:</span><span class="token string">&quot;这是绑定的 Vue 实例中的数据&quot;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <p>除了上面例子中传入字符串外，我们可以将各种类型的数据传递给  <code>prop</code> ，如数字、布尔值、数组、对象等，不过当传入这些数据时需要使用  <code>v-bind</code>  绑定作为  <code>JavaScript</code>  表达式传入，否则会被当做字符串</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!-- 传入数字，没有 v-bind 会变成字符串 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>data</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>520<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 传入布尔值 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>data</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 传入数组 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>data</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>['a','b','c']<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 传入对象 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>data</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>{title: '标题', message: '消息'}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="传递对象的所有属性"><a href="#传递对象的所有属性" class="header-anchor">#</a> 传递对象的所有属性</h3> <p>如果需要将一个对象的所有属性全部传递给  <code>prop</code> ，可以使用不带参数的  <code>v-bind</code>  取代  <code>v-bind:xxx</code> 。例如下面的对象  <code>message</code></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code>message: {id: 1, title: &quot;标题&quot;}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>全部传递给  <code>prop</code></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span> <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>等价于</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>message.id<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">v-bind:</span>title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>message.title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="自定义事件"><a href="#自定义事件" class="header-anchor">#</a> 自定义事件</h2> <h3 id="监听组件事件"><a href="#监听组件事件" class="header-anchor">#</a> 监听组件事件</h3> <p>我们已经知道 Vue 可以通过  <code>v-on</code>  来绑定事件，如  <code>&lt;input&gt;</code>  标签的点击事件等。那如何监听我们自己组件内部产生的事件呢，Vue 实例提供了一个自定义事件的系统来解决这个问题。子组件可以通过内建方法  <code>$emit</code>  来触发一个事件， <code>$emit</code>  通过传入事件名来触发事件，同时可以携带多个参数。父级组件可以通过  <code>v-on</code>  绑定来监听子组件实例的任意事件。</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Ctemplate%20id%3D%22my-template-7%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3C!--%20%E9%80%9A%E8%BF%87%20%24emit%20%E8%A7%A6%E5%8F%91%E4%B8%80%E4%B8%AA%E5%90%8D%E7%A7%B0%E4%B8%BA%20child-event%20%E7%9A%84%E4%BA%8B%E4%BB%B6%20%20%20%20--%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22button%22%20value%3D%22%E7%82%B9%E5%87%BB%E8%B0%83%E7%94%A8%E7%88%B6%E7%BB%84%E4%BB%B6%E6%96%B9%E6%B3%95%22%20%40click%3D%22%24emit('child-event')%22%3E%20%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%0A%3Cdiv%20id%3D%22vue-example-9%22%3E%0A%20%20%20%20%3C!--%20%E9%80%9A%E8%BF%87%20v-on%20%E7%9B%91%E5%90%AC%E7%BB%84%E4%BB%B6%E4%BA%8B%E4%BB%B6%20child-event%20%E5%B9%B6%E7%BB%91%E5%AE%9A%E5%88%B0%E4%BA%8B%E4%BB%B6%20alert%20%20--%3E%0A%20%20%20%20%3Cmy-component-11%20%40child-event%3D%22alert%22%3E%3C%2Fmy-component-11%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%20%0A%20%20%20%20Vue.component('my-component-11'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20'%23my-template-7'%2C%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-9'%2C%0A%20%20%20%20%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%AE%9A%E4%B9%89%E8%A6%81%E8%B0%83%E7%94%A8%E7%9A%84%E7%88%B6%E7%BB%84%E4%BB%B6%E6%96%B9%E6%B3%95%0A%20%20%20%20%20%20%20%20%20%20%20%20alert%3A%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alert(%22%E7%9B%91%E5%90%AC%E5%88%B0%E4%BA%86%E7%BB%84%E4%BB%B6%E7%9A%84%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>my-template-7<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!-- 通过 $emit 触发一个名称为 child-event 的事件    --&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>点击调用父组件方法<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>$emit('child-event')<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> 
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-9<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 通过 v-on 监听组件事件 child-event 并绑定到事件 alert  --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-11</span> <span class="token attr-name">@child-event</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>alert<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-11</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> 
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-11'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        template<span class="token punctuation">:</span> <span class="token string">'#my-template-7'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-9'</span><span class="token punctuation">,</span>
        methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token comment">// 定义要调用的父组件方法</span>
            <span class="token function-variable function">alert</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;监听到了组件的点击事件&quot;</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <h3 id="让组件支持-v-model"><a href="#让组件支持-v-model" class="header-anchor">#</a> 让组件支持  <code>v-model</code></h3> <p>我们知道表单组件可以通过  <code>v-model</code>  进行双向绑定，如何让我们的组件也支持呢？实际上  <code>v-model</code>  相当于先通过  <code>v-bind</code>  绑定  <code>value</code>  属性到一个变量，然后通过  <code>v-on</code>  监听表单的输入事件改变变量的值</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>等价于</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">v-bind:</span>value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">v-on:</span>input</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>message = $event.target.value<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>因此要使我们自己的组件支持  <code>v-model</code> ，首先需要添加一个名为 value 的  <code>prop</code> ，然后触发名称为 input 的事件。组件内的  <code>&lt;input&gt;</code>  控件将  <code>value</code>  属性绑定到名为 value 的  <code>prop</code>  属性，同时监听  <code>input</code>  事件触发一个名为 input 的事件</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Ctemplate%20id%3D%22my-template-13%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22text%22%20v-bind%3Avalue%3D%22value%22%20v-on%3Ainput%3D%22%24emit('input'%2C%24event.target.value)%22%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%0A%3Cdiv%20id%3D%22vue-example-19%22%3E%0A%20%20%20%20%3Ch5%3E%7B%7Bmessage%7D%7D%3C%2Fh5%3E%0A%20%20%20%20%3Cmy-component-21%20v-model%3D%22message%22%3E%3C%2Fmy-component-21%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%20%0A%20%20%20%20Vue.component('my-component-21'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20'%23my-template-13'%2C%0A%20%20%20%20%20%20%20%20props%3A%20%5B'value'%5D%2C%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-19'%2C%0A%20%20%20%20%20%20%20%20data%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20message%3A%20%22%E6%B5%8B%E8%AF%95%E7%BB%84%E4%BB%B6%20v-model%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>my-template-13<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">v-bind:</span>value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>value<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">v-on:</span>input</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>$emit('input',$event.target.value)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-19<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">&gt;</span></span>{{message}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-21</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-21</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> 
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-21'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        template<span class="token punctuation">:</span> <span class="token string">'#my-template-13'</span><span class="token punctuation">,</span>
        props<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'value'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-19'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span><span class="token punctuation">{</span>
            message<span class="token punctuation">:</span> <span class="token string">&quot;测试组件 v-model&quot;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <p>通常情况下组件的  <code>v-model</code>  默认利用名为 value 的  <code>prop</code>  跟名为  <code>input</code>  的事件，但是像单选框这种应该使用  <code>checked</code>  跟   <code>change</code>  事件。这个时候需要使用组件实例的  <code>model</code>  属性变更默认的  <code>prop</code>  与事件。</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Ctemplate%20id%3D%22my-template-14%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22checkbox%22%20v-bind%3Achecked%3D%22checked%22%20v-on%3Achange%3D%22%24emit('change'%2C%24event.target.checked)%22%3E%E7%82%B9%E5%87%BB%E9%80%89%E6%8B%A9%E6%A1%86%E6%9F%A5%E7%9C%8B%E9%80%89%E4%B8%AD%E7%BB%93%E6%9E%9C%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%0A%3Cdiv%20id%3D%22vue-example-20%22%3E%0A%20%20%20%20%3Ch5%3E%7B%7Bselected%20%3F%20%22%E9%80%89%E4%B8%AD%22%20%3A%20%22%E6%9C%AA%E9%80%89%E4%B8%AD%22%7D%7D%3C%2Fh5%3E%0A%20%20%20%20%3Cmy-component-22%20v-model%3D%22selected%22%3E%3C%2Fmy-component-22%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%20%0A%20%20%20%20Vue.component('my-component-22'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20'%23my-template-14'%2C%0A%20%20%20%20%20%20%20%20props%3A%20%5B'checked'%5D%2C%0A%20%20%20%20%20%20%20%20model%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20prop%3A%20%22checked%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20event%3A%20%22change%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-20'%2C%0A%20%20%20%20%20%20%20%20data%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20selected%3A%20true%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>my-template-14<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">v-bind:</span>checked</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>checked<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">v-on:</span>change</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>$emit('change',$event.target.checked)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点击选择框查看选中结果
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-20<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">&gt;</span></span>{{selected ? &quot;选中&quot; : &quot;未选中&quot;}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-22</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>selected<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-22</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> 
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-22'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        template<span class="token punctuation">:</span> <span class="token string">'#my-template-14'</span><span class="token punctuation">,</span>
        props<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'checked'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        model<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            prop<span class="token punctuation">:</span> <span class="token string">&quot;checked&quot;</span><span class="token punctuation">,</span>
            event<span class="token punctuation">:</span> <span class="token string">&quot;change&quot;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-20'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span><span class="token punctuation">{</span>
            selected<span class="token punctuation">:</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <h2 id="组件传值"><a href="#组件传值" class="header-anchor">#</a> 组件传值</h2> <h3 id="父组件向子组件传值"><a href="#父组件向子组件传值" class="header-anchor">#</a> 父组件向子组件传值</h3> <p>我们可以将 Vue 实例理解为一个父组件，自己定义的组件就是子组件，子组件无法直接使用父组件的数据，这时需要通过  <code>prop</code>  进行传值。</p> <p>第一步：在子组件的  <code>props</code>  属性数组中定义一个用来接收父组件传递值的自定义属性</p> <p>第二步：在子组件模板中需要使用父组件值的位置使用自定义的属性</p> <p>第三步：使用组件时将父组件要传值的属性绑定到  <code>prop</code>  上</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Ctemplate%20id%3D%22my-template-6%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3C!--%20%E5%AE%9A%E4%B9%89%E6%A8%A1%E6%9D%BF%E6%97%B6%E4%BD%BF%E7%94%A8%20props%20%E4%B8%AD%E7%9A%84%E5%B1%9E%E6%80%A7%20--%3E%0A%20%20%20%20%20%20%20%20%3Cp%3E%7B%7BparentMsg%7D%7D%3C%2Fp%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%0A%3Cdiv%20id%3D%22vue-example-8%22%3E%0A%20%20%20%20%3C!--%20%E4%BD%BF%E7%94%A8%E6%A8%A1%E6%9D%BF%E6%97%B6%E5%B0%86%20prop%20%E5%B1%9E%E6%80%A7%E4%B8%8E%E7%88%B6%E7%BB%84%E4%BB%B6%E8%A6%81%E4%BC%A0%E5%80%BC%E7%9A%84%E5%B1%9E%E6%80%A7%E8%BF%9B%E8%A1%8C%E7%BB%91%E5%AE%9A%20--%3E%0A%20%20%20%20%3Cmy-component-10%20%3Aparent-msg%3D%22message%22%3E%3C%2Fmy-component-10%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%20%0A%20%20%20%20Vue.component('my-component-10'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20'%23my-template-6'%2C%0A%20%20%20%20%20%20%20%20%2F%2F%20%E5%A3%B0%E6%98%8E%E9%9C%80%E8%A6%81%E6%8E%A5%E6%94%B6%E7%88%B6%E7%BB%84%E4%BB%B6%E5%80%BC%E7%9A%84%E5%B1%9E%E6%80%A7%0A%20%20%20%20%20%20%20%20props%3A%20%5B'parentMsg'%5D%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-8'%2C%0A%20%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E7%88%B6%E7%BB%84%E4%BB%B6%E8%A6%81%E4%BC%A0%E9%80%92%E7%9A%84%E5%80%BC%0A%20%20%20%20%20%20%20%20%20%20%20%20%20message%3A%20%22hello%20Vue%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>my-template-6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!-- 定义模板时使用 props 中的属性 --&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>{{parentMsg}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 使用模板时将 prop 属性与父组件要传值的属性进行绑定 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-10</span> <span class="token attr-name">:parent-msg</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-10</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> 
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-10'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        template<span class="token punctuation">:</span> <span class="token string">'#my-template-6'</span><span class="token punctuation">,</span>
        <span class="token comment">// 声明需要接收父组件值的属性</span>
        props<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'parentMsg'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-8'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
             <span class="token comment">// 父组件要传递的值</span>
             message<span class="token punctuation">:</span> <span class="token string">&quot;hello Vue&quot;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <div class="custom-block warning"><p class="custom-block-title">注意</p> <p><code>props</code>  中的属性为只读的不可修改，也就是子组件无法通过这种方式修改父组件的值</p></div> <h3 id="子组件向父组件传值"><a href="#子组件向父组件传值" class="header-anchor">#</a> 子组件向父组件传值</h3> <p>子组件向父组件传值需要子组件通过  <code>$emit</code>  调用父组件的方法，并把值通过参数传递出去。</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Ctemplate%20id%3D%22my-template-8%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22button%22%20value%3D%22%E7%82%B9%E5%87%BB%E8%B0%83%E7%94%A8%E7%88%B6%E7%BB%84%E4%BB%B6%E6%96%B9%E6%B3%95%E5%B9%B6%E4%BC%A0%E5%80%BC%22%20%40click%3D%22childMethod%22%3E%20%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%0A%3Cdiv%20id%3D%22vue-example-10%22%3E%0A%20%20%20%20%3Cmy-component-12%20%40parent-method%3D%22alert%22%3E%3C%2Fmy-component-12%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%20%0A%20%20%20%20Vue.component('my-component-12'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20'%23my-template-8'%2C%0A%20%20%20%20%20%20%20%20data%3A%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E8%A6%81%E4%BC%A0%E9%80%92%E7%9A%84%E6%95%B0%E6%8D%AE%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20message%3A%20%22%E8%B0%83%E7%94%A8%E7%88%B6%E7%BB%84%E4%BB%B6%E6%96%B9%E6%B3%95%E5%B9%B6%E4%BC%A0%E5%80%BC%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%9C%A8%E5%AD%90%E7%BB%84%E4%BB%B6%E4%B8%AD%E5%AE%9A%E4%B9%89%E4%B8%80%E4%B8%AA%E6%96%B9%E6%B3%95%E9%80%9A%E8%BF%87%20emit%20%E8%A7%A6%E5%8F%91%E7%88%B6%E7%BB%84%E4%BB%B6%E6%96%B9%E6%B3%95%EF%BC%8C%E5%B9%B6%E9%80%9A%E8%BF%87%E5%8F%82%E6%95%B0%E6%90%BA%E5%B8%A6%E6%95%B0%E6%8D%AE%0A%20%20%20%20%20%20%20%20%20%20%20%20childMethod%3A%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.%24emit(%22parent-method%22%2Cthis.message)%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-10'%2C%0A%20%20%20%20%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%AE%9A%E4%B9%89%E8%A6%81%E8%B0%83%E7%94%A8%E7%9A%84%E7%88%B6%E7%BB%84%E4%BB%B6%E6%96%B9%E6%B3%95%E5%B9%B6%E5%B8%A6%E6%9C%89%E5%8F%82%E6%95%B0%E6%8E%A5%E6%94%B6%E6%95%B0%E6%8D%AE%EF%BC%8C%E5%8F%AF%E4%BB%A5%E6%9C%89%E5%A4%9A%E4%B8%AA%E5%8F%82%E6%95%B0%E6%9D%A5%E6%8E%A5%E6%94%B6%E5%A4%9A%E4%B8%AA%E6%95%B0%E6%8D%AE%0A%20%20%20%20%20%20%20%20%20%20%20%20alert%3A%20function%20(arg)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alert(arg)%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>my-template-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>点击调用父组件方法并传值<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>childMethod<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> 
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-12</span> <span class="token attr-name">@parent-method</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>alert<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-12</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> 
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-12'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        template<span class="token punctuation">:</span> <span class="token string">'#my-template-8'</span><span class="token punctuation">,</span>
        <span class="token function-variable function">data</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                <span class="token comment">// 要传递的数据</span>
                message<span class="token punctuation">:</span> <span class="token string">&quot;调用父组件方法并传值&quot;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token comment">// 在子组件中定义一个方法通过 emit 触发父组件方法，并通过参数携带数据</span>
            <span class="token function-variable function">childMethod</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">&quot;parent-method&quot;</span><span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-10'</span><span class="token punctuation">,</span>
        methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token comment">// 定义要调用的父组件方法并带有参数接收数据，可以有多个参数来接收多个数据</span>
            <span class="token function-variable function">alert</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">arg</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token function">alert</span><span class="token punctuation">(</span>arg<span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <h3 id="访问根实例与父组件实例"><a href="#访问根实例与父组件实例" class="header-anchor">#</a> 访问根实例与父组件实例</h3> <p>每个 Vue 实例的子组件都可以使用  <code>$root</code>  来访问这个 Vue 根实例，使用  <code>$parent</code>  可以访问其父组件实例。</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Cdiv%20id%3D%22vue-example-21%22%3E%0A%20%20%20%20%3Cmy-component-parent%3E%3C%2Fmy-component-parent%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%20%0A%20%20%20%20Vue.component('my-component-parent'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20'%3Cdiv%3E%3Cmy-component-child%3E%3C%2Fmy-component-child%3E%3C%2Fdiv%3E'%2C%0A%20%20%20%20%20%20%20%20data%3A%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20message%3A%20%22%E7%88%B6%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E7%9A%84%E6%95%B0%E6%8D%AE%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20Vue.component('my-component-child'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20'%3Ch3%3E%7B%7Bthis.%24root.message%7D%7D%20-%20%7B%7Bthis.%24parent.message%7D%7D%3C%2Fh3%3E'%2C%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-21'%2C%0A%20%20%20%20%20%20%20%20data%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20message%3A%20%22%E6%A0%B9%E5%AE%9E%E4%BE%8B%E7%9A%84%E6%95%B0%E6%8D%AE%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-21<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-parent</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-parent</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> 
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-parent'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        template<span class="token punctuation">:</span> <span class="token string">'&lt;div&gt;&lt;my-component-child&gt;&lt;/my-component-child&gt;&lt;/div&gt;'</span><span class="token punctuation">,</span>
        <span class="token function-variable function">data</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                message<span class="token punctuation">:</span> <span class="token string">&quot;父组件实例的数据&quot;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-child'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        template<span class="token punctuation">:</span> <span class="token string">'&lt;h3&gt;{{this.$root.message}} - {{this.$parent.message}}&lt;/h3&gt;'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-21'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span><span class="token punctuation">{</span>
            message<span class="token punctuation">:</span> <span class="token string">&quot;根实例的数据&quot;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <h3 id="依赖注入"><a href="#依赖注入" class="header-anchor">#</a> 依赖注入</h3> <p>当出现多层组件嵌套时，如果最内层的组件需要通过  <code>$parent</code>  访问外层组件的实例有可能会出现  <code>this.$parent.$parent.message</code>  这样的情况，甚至可能会嵌套更多层。这个时候我们可以使用依赖注入的方式来实现。依赖注入需要用到两个组件的属性  <code>provide</code>  和  <code>inject</code> 。</p> <p><code>provide</code>  允许组件指定想让子组件访问的数据或方法。任何子组件都可以通过  <code>inject</code>  来接收我们想要添加在这个组件上的属性。这时我们就可以在这个子组件中直接访问数据。</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Cdiv%20id%3D%22vue-example-22%22%3E%0A%20%20%20%20%3Cmy-component-provide%3E%3C%2Fmy-component-provide%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%20%0A%20%20%20%20Vue.component('my-component-provide'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20'%3Cdiv%3E%3Cmy-component-inject%3E%3C%2Fmy-component-inject%3E%3C%2Fdiv%3E'%2C%0A%20%20%20%20%20%20%20%20data%3A%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20message%3A%20%22%E9%80%9A%E8%BF%87%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5%E8%8E%B7%E5%8F%96%E7%88%B6%E7%BB%84%E4%BB%B6%E7%9A%84%E6%95%B0%E6%8D%AE%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20provide%3A%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E8%AE%A9%E5%AD%90%E7%BB%84%E4%BB%B6%E9%80%9A%E8%BF%87%20getMessage%20%E8%AE%BF%E9%97%AE%20message%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20getMessage%3A%20this.message%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20Vue.component('my-component-inject'%2C%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20%E6%A8%A1%E6%9D%BF%E4%B8%AD%E7%9B%B4%E6%8E%A5%E4%BD%BF%E7%94%A8%20getMessage%20%E8%8E%B7%E5%8F%96%E7%88%B6%E7%BB%84%E4%BB%B6%E6%95%B0%E6%8D%AE%0A%20%20%20%20%20%20%20%20template%3A%20'%3Ch3%3E%7B%7Bthis.getMessage%7D%7D%3C%2Fh3%3E'%2C%0A%20%20%20%20%20%20%20%20%2F%2F%20%E5%AD%90%E7%BB%84%E4%BB%B6%E6%8E%A5%E6%94%B6%20getMessage%0A%20%20%20%20%20%20%20%20inject%3A%20%5B'getMessage'%5D%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-22'%2C%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-22<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-provide</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-provide</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> 
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-provide'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        template<span class="token punctuation">:</span> <span class="token string">'&lt;div&gt;&lt;my-component-inject&gt;&lt;/my-component-inject&gt;&lt;/div&gt;'</span><span class="token punctuation">,</span>
        <span class="token function-variable function">data</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                message<span class="token punctuation">:</span> <span class="token string">&quot;通过依赖注入获取父组件的数据&quot;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">provide</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                <span class="token comment">// 让子组件通过 getMessage 访问 message</span>
                getMessage<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>message
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-inject'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        <span class="token comment">// 模板中直接使用 getMessage 获取父组件数据</span>
        template<span class="token punctuation">:</span> <span class="token string">'&lt;h3&gt;{{this.getMessage}}&lt;/h3&gt;'</span><span class="token punctuation">,</span>
        <span class="token comment">// 子组件接收 getMessage</span>
        inject<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'getMessage'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-22'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <h3 id="访问子组件实例"><a href="#访问子组件实例" class="header-anchor">#</a> 访问子组件实例</h3> <p>在 Vue 中我们可以通过  <code>ref</code>  属性来获取 DOM 元素</p> <p>第一步：给标签设置  <code>ref</code>  属性</p> <p>第二步：通过  <code>this.$refs.xxx</code>  获取 DOM 元素</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Cdiv%20id%3D%22vue-example-11%22%3E%0A%20%20%20%20%3Cdiv%20ref%3D%22example%22%3E%E9%80%9A%E8%BF%87%20ref%20%E8%8E%B7%E5%8F%96%20DOM%20%E5%85%83%E7%B4%A0%3C%2Fdiv%3E%0A%20%20%20%20%3Cinput%20type%3D%22button%22%20value%3D%22%E7%82%B9%E5%87%BB%E8%8E%B7%E5%8F%96%20DOM%20%E5%85%83%E7%B4%A0%22%20%40click%3D%22alert%22%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%20%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-11'%2C%0A%20%20%20%20%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20alert%3A%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alert(this.%24refs.example.innerText)%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-11<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>example<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>通过 ref 获取 DOM 元素<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>点击获取 DOM 元素<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>alert<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> 
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-11'</span><span class="token punctuation">,</span>
        methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token function-variable function">alert</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token function">alert</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>example<span class="token punctuation">.</span>innerText<span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <p>同样我们将  <code>ref</code>  属性添加到子组件上，这样就可以在父组件中直接拿到子组件以及其中的数据与方法</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Cdiv%20id%3D%22vue-example-12%22%3E%0A%20%20%20%20%3C!--%20%E5%9C%A8%E5%AD%90%E7%BB%84%E4%BB%B6%E4%B8%8A%E6%B7%BB%E5%8A%A0%20ref%20--%3E%0A%20%20%20%20%3Cmy-component-13%20ref%3D%22component13%22%3E%3C%2Fmy-component-13%3E%0A%20%20%20%20%3Cinput%20type%3D%22button%22%20value%3D%22%E7%82%B9%E5%87%BB%E8%8E%B7%E5%8F%96%E5%AD%90%E7%BB%84%E4%BB%B6%E6%95%B0%E6%8D%AE%22%20%40click%3D%22getChildData%22%3E%0A%20%20%20%20%3Cinput%20type%3D%22button%22%20value%3D%22%E7%82%B9%E5%87%BB%E8%B0%83%E7%94%A8%E5%AD%90%E7%BB%84%E4%BB%B6%E6%96%B9%E6%B3%95%22%20%40click%3D%22getChildMethod%22%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%20%0A%20%20%20%20Vue.component('my-component-13'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20'%3Cdiv%3E%E8%8E%B7%E5%8F%96%E5%AD%90%E7%BB%84%E4%BB%B6%3C%2Fdiv%3E'%2C%0A%20%20%20%20%20%20%20%20data%3A%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E8%A6%81%E4%BC%A0%E9%80%92%E7%9A%84%E6%95%B0%E6%8D%AE%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20message%3A%20%22%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E6%95%B0%E6%8D%AE%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%9C%A8%E5%AD%90%E7%BB%84%E4%BB%B6%E4%B8%AD%E5%AE%9A%E4%B9%89%E4%B8%80%E4%B8%AA%E6%96%B9%E6%B3%95%E9%80%9A%E8%BF%87%20emit%20%E8%A7%A6%E5%8F%91%E7%88%B6%E7%BB%84%E4%BB%B6%E6%96%B9%E6%B3%95%EF%BC%8C%E5%B9%B6%E9%80%9A%E8%BF%87%E5%8F%82%E6%95%B0%E6%90%BA%E5%B8%A6%E6%95%B0%E6%8D%AE%0A%20%20%20%20%20%20%20%20%20%20%20%20childMethod%3A%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alert(%22%E8%B0%83%E7%94%A8%E4%BA%86%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E6%96%B9%E6%B3%95%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-12'%2C%0A%20%20%20%20%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20getChildData%3A%20function%20(arg)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alert(this.%24refs.component13.message)%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20getChildMethod%3A%20function%20(arg)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.%24refs.component13.childMethod()%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 在子组件上添加 ref --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-13</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>component13<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-13</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>点击获取子组件数据<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>getChildData<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>点击调用子组件方法<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>getChildMethod<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> 
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-13'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        template<span class="token punctuation">:</span> <span class="token string">'&lt;div&gt;获取子组件&lt;/div&gt;'</span><span class="token punctuation">,</span>
        <span class="token function-variable function">data</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                <span class="token comment">// 要传递的数据</span>
                message<span class="token punctuation">:</span> <span class="token string">&quot;子组件的数据&quot;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token comment">// 在子组件中定义一个方法通过 emit 触发父组件方法，并通过参数携带数据</span>
            <span class="token function-variable function">childMethod</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;调用了子组件的方法&quot;</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-12'</span><span class="token punctuation">,</span>
        methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token function-variable function">getChildData</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">arg</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token function">alert</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>component13<span class="token punctuation">.</span>message<span class="token punctuation">)</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token function-variable function">getChildMethod</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">arg</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>component13<span class="token punctuation">.</span><span class="token function">childMethod</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <h2 id="插槽"><a href="#插槽" class="header-anchor">#</a> 插槽</h2> <p>在子组件中插入  <code>slot</code>  标签，当组件渲染时该标签将被替换为组件标签间包裹的内容。如果子组件中没有  <code>slot</code>  标签则中间包裹的内容将全部丢弃。</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Ctemplate%20id%3D%22my-template-9%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3C!--%20%E6%B8%B2%E6%9F%93%E6%97%B6%E4%BC%9A%E8%A2%AB%E6%9B%BF%E6%8D%A2%20--%3E%0A%20%20%20%20%20%20%20%20%3Cslot%3E%3C%2Fslot%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%0A%3Cdiv%20id%3D%22vue-example-13%22%3E%0A%20%20%20%20%3Cmy-component-14%3E%0A%20%20%20%20%20%20%20%20%E8%BF%99%E9%87%8C%E7%9A%84%E5%86%85%E5%AE%B9%E4%BC%9A%E5%8E%BB%E6%9B%BF%E6%8D%A2%E5%AD%90%E7%BB%84%E4%BB%B6%E4%B8%AD%E7%9A%84%20slot%20%E6%A0%87%E7%AD%BE%2C%E8%8B%A5%E5%AD%90%E7%BB%84%E4%BB%B6%E6%B2%A1%E6%9C%89%20slot%20%E6%A0%87%E7%AD%BE%2C%E5%88%99%E8%AF%A5%E5%A4%84%E7%9A%84%E5%86%85%E5%AE%B9%E4%BC%9A%E8%A2%AB%E4%B8%A2%E5%BC%83%0A%20%20%20%20%3C%2Fmy-component-14%3E%0A%20%20%20%20%3Cmy-component-14%3E%0A%20%20%20%20%20%20%20%20%3Cp%3E%E8%BF%99%E9%87%8C%E5%8F%AF%E4%BB%A5%E6%8F%92%E5%85%A5%E4%BB%BB%E4%BD%95%E6%A8%A1%E6%9D%BF%E4%BB%A3%E7%A0%81%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%3Cp%3E%7B%7Bmessage%7D%7D%3C%2Fp%3E%0A%20%20%20%20%3C%2Fmy-component-14%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%20%0A%20%20%20%20Vue.component('my-component-14'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20'%23my-template-9'%2C%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-13'%2C%0A%20%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20message%3A%22%E8%BF%99%E9%87%8C%E8%BF%98%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8%20Vue%20%E5%AE%9E%E4%BE%8B%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>my-template-9<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!-- 渲染时会被替换 --&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-13<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-14</span><span class="token punctuation">&gt;</span></span>
        这里的内容会去替换子组件中的 slot 标签,若子组件没有 slot 标签,则该处的内容会被丢弃
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-14</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-14</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>这里可以插入任何模板代码<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>{{message}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-14</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> 
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-14'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        template<span class="token punctuation">:</span> <span class="token string">'#my-template-9'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-13'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            message<span class="token punctuation">:</span><span class="token string">&quot;这里还可以使用 Vue 实例中的数据&quot;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <div class="custom-block tip"><p>在 2.6.0 以后的版本  <code>slot</code>  已被替换为  <code>v-slot</code></p></div> <h3 id="默认内容"><a href="#默认内容" class="header-anchor">#</a> 默认内容</h3> <p>我们可以在  <code>slot</code>  标签间插入默认内容，当没有内容替换时就显示默认内容</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Ctemplate%20id%3D%22my-template-10%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Cslot%3E%E8%BF%99%E6%98%AF%E9%BB%98%E8%AE%A4%E5%86%85%E5%AE%B9%3C%2Fslot%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%0A%3Cdiv%20id%3D%22vue-example-14%22%3E%0A%20%20%20%20%3Cmy-component-15%3E%3C%2Fmy-component-15%3E%0A%20%20%20%20%3Cmy-component-15%3E%3Cp%3E%E9%BB%98%E8%AE%A4%E5%86%85%E5%AE%B9%E5%B7%B2%E8%A2%AB%E6%9B%BF%E6%8D%A2%3C%2Fp%3E%3C%2Fmy-component-15%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%20%0A%20%20%20%20Vue.component('my-component-15'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20'%23my-template-10'%2C%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-14'%2C%0A%20%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20message%3A%22%E8%BF%99%E9%87%8C%E8%BF%98%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8%20Vue%20%E5%AE%9E%E4%BE%8B%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>my-template-10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span><span class="token punctuation">&gt;</span></span>这是默认内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-14<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-15</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-15</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-15</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>默认内容已被替换<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-15</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> 
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-15'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        template<span class="token punctuation">:</span> <span class="token string">'#my-template-10'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-14'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            message<span class="token punctuation">:</span><span class="token string">&quot;这里还可以使用 Vue 实例中的数据&quot;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <h3 id="具名插槽"><a href="#具名插槽" class="header-anchor">#</a> 具名插槽</h3> <p>有时我们可能在一个组件中添加多个不同的插槽，这时需要使用  <code>name</code>  属性来区分，一个不带  <code>name</code>  属性的插槽默认为 default。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>xxx<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>在向具名插糟提供内容时需要使用  <code>&lt;template&gt;</code>  元素并添加  <code>v-slot</code>  参数形式的指令来指明插槽</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name"><span class="token namespace">v-slot:</span>xxx</span><span class="token punctuation">&gt;</span></span>替换插糟内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Ctemplate%20id%3D%22my-template-11%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Cslot%20name%3D%22header%22%3E%3C%2Fslot%3E%0A%20%20%20%20%20%20%20%20%3Cslot%3E%3C%2Fslot%3E%0A%20%20%20%20%20%20%20%20%3Cslot%20name%3D%22footer%22%3E%3C%2Fslot%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%0A%3Cdiv%20id%3D%22vue-example-15%22%3E%0A%20%20%20%20%3Cmy-component-16%3E%0A%20%20%20%20%20%20%20%20%3Ctemplate%20v-slot%3Aheader%3E%3Cp%3E%E6%AD%A4%E5%A4%84%E5%B0%86%E6%9B%BF%E6%8D%A2%20name%20%E4%B8%BA%20header%20%E7%9A%84%E6%8F%92%E6%A7%BD%3C%2Fp%3E%3C%2Ftemplate%3E%0A%20%20%20%20%20%20%20%20%3Cp%3E%E6%AD%A4%E5%A4%84%E5%B0%86%E6%9B%BF%E6%8D%A2%E6%B2%A1%E6%9C%89%20name%20%E7%9A%84%E6%8F%92%E6%A7%BD%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%3Ctemplate%20v-slot%3Afooter%3E%3Cp%3E%E6%AD%A4%E5%A4%84%E5%B0%86%E6%9B%BF%E6%8D%A2%20name%20%E4%B8%BA%20footer%20%E7%9A%84%E6%8F%92%E6%A7%BD%3C%2Fp%3E%3C%2Ftemplate%3E%0A%20%20%20%20%3C%2Fmy-component-16%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%20%0A%20%20%20%20Vue.component('my-component-16'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20'%23my-template-11'%2C%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-15'%2C%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>my-template-11<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>header<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>footer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-15<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-16</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name"><span class="token namespace">v-slot:</span>header</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>此处将替换 name 为 header 的插槽<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>此处将替换没有 name 的插槽<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name"><span class="token namespace">v-slot:</span>footer</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>此处将替换 name 为 footer 的插槽<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-16</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> 
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-16'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        template<span class="token punctuation">:</span> <span class="token string">'#my-template-11'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-15'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <div class="custom-block tip"><p class="custom-block-title">动态插槽名</p> <p><code>v-slot</code>  可以使用动态的插槽名</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name"><span class="token namespace">v-slot:</span>[slotName]</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></div> <div class="custom-block tip"><p class="custom-block-title">v-slot 缩写</p> <p><code>v-slot:</code>  可以缩写为  <code>#</code></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name"><span class="token namespace">v-slot:</span>header</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>可以缩写为</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#header</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></div> <h3 id="作用域插槽"><a href="#作用域插槽" class="header-anchor">#</a> 作用域插槽</h3> <p>通常情况下用来替换插槽的内容处于组件的父级作用域内因此无法访问组件的数据，如果我们想让插槽内容访问组件数据需要使用插槽  <code>prop</code></p> <p>第一步：在  <code>&lt;slot&gt;</code>  上将要访问的子组件数据与属性进行绑定，绑定在  <code>&lt;slot&gt;</code>  元素上的属性被称为插槽  <code>prop</code></p> <p>第二步：在父级作用域上使用带值的  <code>v-slot</code>  定义插槽  <code>prop</code>  的名称</p> <p>第三步：使用定义的名称来访问绑定到相应  <code>slot</code>  上的数据</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Ctemplate%20id%3D%22my-template-12%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3C!--%20%E7%BB%91%E5%AE%9A%E8%A6%81%E8%AE%BF%E9%97%AE%E7%9A%84%E6%95%B0%E6%8D%AE%20--%3E%0A%20%20%20%20%20%20%20%20%3Cslot%20v-bind%3Amessage%3D%22message%22%3E%3C%2Fslot%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%0A%3Cdiv%20id%3D%22vue-example-16%22%3E%0A%20%20%20%20%3Cmy-component-17%3E%0A%20%20%20%20%20%20%20%20%3C!--%20%E5%9C%A8%E7%88%B6%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F%E4%B8%8A%E9%80%9A%E8%BF%87%E5%B8%A6%E5%8F%82%20v-slot%20%E5%AE%9A%E4%B9%89%E6%8F%92%E6%A7%BD%20prop%20%E7%9A%84%E5%90%8D%E7%A7%B0%20--%3E%0A%20%20%20%20%20%20%20%20%3C!--%20%E9%80%9A%E8%BF%87%E5%AE%9A%E4%B9%89%E7%9A%84%E5%90%8D%E7%A7%B0%E8%AE%BF%E9%97%AE%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AD%90%E7%BB%84%E4%BB%B6%E6%95%B0%E6%8D%AE%20--%3E%0A%20%20%20%20%20%20%20%20%3C!--%20%E4%B8%8D%E5%B8%A6%20name%20%E5%B1%9E%E6%80%A7%E7%9A%84%20slot%20%E9%BB%98%E8%AE%A4%E4%B8%BA%20default%20--%3E%0A%20%20%20%20%20%20%20%20%3Ctemplate%20v-slot%3Adefault%3D%22prop%22%3E%3Cp%3E%7B%7Bprop.message%7D%7D%3C%2Fp%3E%3C%2Ftemplate%3E%0A%20%20%20%20%3C%2Fmy-component-17%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%20%0A%20%20%20%20Vue.component('my-component-17'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20'%23my-template-12'%2C%0A%20%20%20%20%20%20%20%20data%3A%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20message%3A%22%E8%AE%BF%E9%97%AE%E5%88%B0%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E6%95%B0%E6%8D%AE%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-16'%2C%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>my-template-12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!-- 绑定要访问的数据 --&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>message</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-16<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-17</span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!-- 在父级作用域上通过带参 v-slot 定义插槽 prop 的名称 --&gt;</span>
        <span class="token comment">&lt;!-- 通过定义的名称访问绑定的子组件数据 --&gt;</span>
        <span class="token comment">&lt;!-- 不带 name 属性的 slot 默认为 default --&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name"><span class="token namespace">v-slot:</span>default</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>prop<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>{{prop.message}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-17</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> 
    Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-component-17'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        template<span class="token punctuation">:</span> <span class="token string">'#my-template-12'</span><span class="token punctuation">,</span>
        <span class="token function-variable function">data</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                message<span class="token punctuation">:</span><span class="token string">&quot;访问到子组件的数据&quot;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-16'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <div class="custom-block tip"><p class="custom-block-title">简写作用域插槽</p> <p>像上面的例子中如果只有一个默认插槽则我们可以吧  <code>v-slot</code>  直接写到组件标签上且无需  <code>&lt;template&gt;</code>  标签</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-17</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name"><span class="token namespace">v-slot:</span>default</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>prop<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>{{prop.message}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-17</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>可以简写为</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component-17</span> <span class="token attr-name">v-slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>prop<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>{{prop.message}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-component-17</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>但是如果有多个具名插槽则不可以简写，必须使用  <code>template</code>  标签并用带参  <code>v-slot</code></p></div></div> <footer class="page-edit" style="display:none;"><!----> <!----></footer> <!----> <!----></main> <!----> <div class="comments-wrapper" data-v-0cb1c278><div class="valine-wrapper"><div id="valine"></div></div></div></div></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-a81d141e data-v-a81d141e><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-a81d141e><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-a81d141e></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-a81d141e></path></svg></div><canvas id="vuepress-canvas-ribbon"></canvas><div class="my-popup" style="display:none;" data-v-3414bdeb><div class="my-popup-container" data-v-3414bdeb><div class="my-popup-exit" data-v-3414bdeb></div> <img src="" alt data-v-3414bdeb></div></div><div data-v-2ebabc0c></div><div class="kanbanniang" data-v-3b0f9b07><div class="banniang-container" style="display:;" data-v-3b0f9b07><div class="messageBox" style="right:68px;bottom:230px;display:none;" data-v-3b0f9b07>
      欢迎来到 KnightSama‘s Blog
    </div> <div class="operation" style="right:90px;bottom:40px;display:;" data-v-3b0f9b07><i class="kbnfont kbn-ban-home ban-home" data-v-3b0f9b07></i> <i class="kbnfont kbn-ban-message message" data-v-3b0f9b07></i> <i class="kbnfont kbn-ban-close close" data-v-3b0f9b07></i> <a target="_blank" href="https://vuepress-theme-reco.recoluan.com/views/plugins/kanbanniang.html" data-v-3b0f9b07><i class="kbnfont kbn-ban-info info" data-v-3b0f9b07></i></a> <i class="kbnfont kbn-ban-theme skin" style="display:;" data-v-3b0f9b07></i></div> <canvas id="banniang" width="200" height="260" class="live2d" style="right:90px;bottom:-20px;opacity:0.9;" data-v-3b0f9b07></canvas></div> <div class="showBanNiang" style="display:none;" data-v-3b0f9b07>
    看板娘
  </div></div></div></div>
    <script src="/assets/js/app.a2483de7.js" defer></script><script src="/assets/js/4.0078dadf.js" defer></script><script src="/assets/js/1.c3e7d2b0.js" defer></script><script src="/assets/js/35.66d3fc4a.js" defer></script>
  </body>
</html>
